<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/demo.css">
  <title></title>
  <script type="text/javascript" src="./js/echarts.js"></script>
	<script type="text/javascript" src="./js/jquery-3.4.0.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="./js/js.js"></script>
  <script type="text/javascript" src="./js/comment.js"></script>
</head>
<body>
  <div id="app">
    <div id="title">
      <h1>Bilibili爬虫系统</h1>
    </div>
    <div id="box">
      <div class="boxitem" id="left">
        <div class="boxall" id="detail">
          <div class="alltitle">数据详情</div>
          <div></div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" id="sex">
          <div class="alltitle">男女比例</div>
          <div>
            <div id="sexnum" style="height: 100%; width: 90%;"></div>
					  <script type="text/javascript" src="./js/js.js"></script>
          </div>
          <!-- <div id="sexnum" style="height: 100%; width: 90%;"></div>
					<script type="text/javascript" src="./js/bar.js"></script> -->
          <div class="boxfoot"></div>
        </div>
      </div>
      <div class="boxitem" id="middle">
        <div class="boxall" id="data">大数据
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" id="pic">
          <div style="width: 100%; height: 100%;">
            <div id="picTil" style="font-size: 18px; color: aliceblue;"></div>
            <div style="width: 100%;height: 400px; padding-top: 10px;">
              <img id="pic" style="width: 100%;height: 100%; border-radius: 10px;" src="" alt="1">
            </div>
          </div>
          <div class="boxfoot"></div>
        </div>
        <div class="boxall" id="detail">
          <div class="alltitle">数据详情</div>
          <div style="float: left;;">
            <div style="overflow: hidden;">
              <div style="float: left;">
                <div class="likes"></div>
                <div>点赞</div>
                <div class="coin"></div>
                <div>投币</div>
              </div>
              <div style="float: left;";>
                <div class="favorite"></div>
                <div>收藏</div>
                <div class="reply"></div>
                <div>回复</div>
              </div>
              <div style="float: left;";>
                <div class="share"></div>
                <div>分享</div>
                <div class="danmu"></div>
                <div>弹幕</div>
              </div>
            </div>
          </div>
          <div class="boxfoot"></div>
        </div>
      </div>
      <div class="boxitem" id="right">
        <div class="boxall" id="viewline">
          <div class="alltitle">数据变化</div>
          <div>
            <div id="line2" style="height: 200px; width: 100%;"></div>
					  <script type="text/javascript" src="./js/js.js"></script>
          </div>
        </div>
        <div class="boxall" id="comment">
          <div class="alltitle">评论</div>
          <div id="comments" style="width: 90%;height: 90%;margin: 0px;">
            <ul class="commentD"></ul>
          </div>
          <div class="boxfoot"></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>